<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header_txt">
      <view class="back"
            @click="goback">
        <image src="/static/img/back3.png"></image>
      </view>
      <view class="title"> 我要提问 </view>
    </view>

    <view class="issue">
      <view class='teatareabox'>
        <textarea class="issuebox"
                  v-model="content"
                  maxlength="140"
                  placeholder="请输入问题内容"
                  placeholder-class="input_class" />

      </view>

      <navigator url="/pages/askquestion/quetype"
                 class="sel">
        <view class="zombietitle">选择分类</view>
        <view class="chooseresult">{{obj.name}}</view>
        <image style="width:20rpx; height:20rpx"
               src="/static/img/more-right.png"></image>

      </navigator>
      <view class='entrue'
            @click="save">确认</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      obj: { id: null, name: '选择分类' }
    }
  },
  onLoad(e) {
    this.obj = JSON.parse(e.obj) || { id: '', name: '选择分类' }
  },
  methods: {
    async save() {
      let { data } = await this.$http.post('/ask/save', { content: this.content, ask_cate_id: this.obj.id })
      uni.showToast({ title: data.msg, icon: 'none' })
      if (data.code == 1) {
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/askquestion/askquestion'
          })
        }, 1500)
      }
    }
  }
}
</script>

<style lang="scss">
.zombietitle {
  width: 70px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0 /* border:1rpx solid red; */;
}
.chooseresult {
  width: 100%;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999;
}
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .right {
    position: absolute;
    top: 14rpx;
    right: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.issue {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx 0;
  box-sizing: border-box;
}
.teatareabox {
  height: auto;
  width: 100%;
  background-color: #ffffff;
  padding: 0 20rpx;
  margin-bottom: 100rpx;
  box-sizing: border-box;
}
.issuebox {
  height: 400rpx;
  width: 100%;
  padding-top: 20rpx;
}
.calcnumber {
  height: 40rpx;
  line-height: 40rpx;
  text-align: end;
  color: #999999;
}

/* 上传多图 */
.manyimgbox {
  height: auto;
  width: 100%;
  /* border:1rpx solid blue; */
  padding: 15rpx 0;
}

/* 多图的盒子容器 */
.imgboxhere {
  /* border: 1rpx solid red; */
  display: flex;
  flex-wrap: wrap;
}

.multiimgbox {
  height: 162rpx;
  width: 162rpx;
  padding: 20rpx;
  /* border: 1rpx solid red; */
  position: relative;
}

.closepng {
  width: 26rpx;
  height: 26rpx;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.multiimg {
  width: 122rpx;
  height: 122rpx;
}

.entrue {
  width: 650rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;

  text-align: center;
  background: #ffdd47;
  border-radius: 10px;
}
.input_class {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.sel {
  margin-bottom: 50px;
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-top: 10px;
  background-color: #fff;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 50px;
  font-size: 14px;
  border-radius: 5px;
}
</style>